﻿@model IEnumerable<CinemaMaestro.WebApplication.Models.MovieViewModels>
@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/react/react.min.js"></script>
<script src="~/Scripts/react/react-dom.js"></script>
<script src="~/Scripts/js/jssor.slider-23.1.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/CarouselComponent.js" type="text/javascript"></script>
<link href="~/Content/CarouselComponent.css" rel="stylesheet">
<div class="panel panel-default">
    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:900px;height:450px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('../../img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:900px;height:450px;overflow:hidden;">

            @{
                foreach (var item in Model)
                {
                    var imgSrc = string.Empty;
                    if (item.Image != null)
                    {
                        /*var base64 = Convert.ToBase64String(@item.Image);
                        imgSrc = String.Format("data:image/jpg;base64,{0}", base64);*/
                        imgSrc = item.Image;
                    }
                    <div>
                        <img data-u="image" src="@imgSrc" />
                    </div>
                }
            }
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
            <div data-u="prototype" style="width:12px;height:12px;"></div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
        <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
    </div>
    <script type="text/javascript">jssor_1_slider_init();</script>
</div>
<br />
<!-- ------------------------------------------------------------------------------------------------------------------------------- -->
<link href="~/Content/RotatingCardFont.css" rel="stylesheet">
<link href="~/Content/RotatingCardFont1.css" rel="stylesheet">
<link href="~/Content/RotatingCard.css" rel="stylesheet">
<script src="~/Scripts/js/RotatingCard.js"></script>
<style>
    h2 {
        background-color: #6ea1ce;
        color: #ffffff;
        font-size: 24px;
        font-family: 'Arima Madurai', cursive;
    }

    .service-title {
        width: 100%;
        text-align: center;
        margin-top: 1em;
        background-color: #6ea1ce;
        padding: .5em 0;
        border-radius: .3em;
        margin-left: 0px;
    }
</style>


<div class="panel panel-default">
    <div class="panel-heading"><div class="service-title"><h2>Cinemas</h2></div></div>
    <div class="panel-body">
        <div class="container">
            <div class="row" id="content">
            </div> <!-- end row -->

        </div>
    </div>
</div>
<script src="~/ReactFiles/Cinemas.jsx"></script>

<!-- ------------------------------------------------------------------------------------------------------------------------------- -->
<style>
    .col-md-4 {
        padding-bottom: 20px;
    }

    .thumbnail > img {
        display: block;
        height: 150px;
        max-width: 100%;
    }

    .thumbnail .caption .service-title > h4 {
        text-align: center;
        color: #ffffff;
        font-family: 'Arima Madurai', cursive;
    }

    a {
        text-decoration: none !important;
    }

    .cuadro_intro_hover {
        padding: 0px;
        position: relative;
        overflow: hidden;
        height: 200px;
        background-color: #cccccc;
    }

        .cuadro_intro_hover p {
            text-align: center;
            margin-top: 20px;
        }

        .cuadro_intro_hover:hover .caption {
            opacity: 1;
            transform: translateY(-150px);
            -webkit-transform: translateY(-150px);
            -moz-transform: translateY(-150px);
            -ms-transform: translateY(-150px);
            -o-transform: translateY(-150px);
        }

        .cuadro_intro_hover img {
            z-index: 4;
        }

        .cuadro_intro_hover .caption {
            position: absolute;
            top: 150px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            width: 100%;
        }

        .cuadro_intro_hover .blur {
            background-color: #6ea1ce;
            opacity: 0.7;
            height: 300px;
            z-index: 5;
            position: absolute;
            width: 100%;
        }

        .cuadro_intro_hover .caption-text {
            z-index: 10;
            color: #fff;
            position: absolute;
            height: 300px;
            text-align: center;
            top: -20px;
            width: 100%;
            border-top: 2px solid white;
            border-bottom: 2px solid white;
            padding: 10px 10px 10px 10px;
        }

            .cuadro_intro_hover .caption-text h3 {
                text-align: center;
                color: #ffffff;
                font-family: 'Arima Madurai', cursive;
            }

            .cuadro_intro_hover .caption-text a {
                display: grid;
                text-align: center;
                font-family: 'Arima Madurai', cursive;
            }

    .buttondiv {
        padding: 2em;
    }

    .seemore {
        background-color: #ffffff;
        border-color: #cccccc;
        color: #333333;
        -moz-user-select: none;
        border: 1px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857;
        margin-bottom: 0;
        padding: 6px 12px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-decoration: none !important;
    }

    .reservation {
        background-color: #ffffff;
        border-color: #cccccc;
        color: #333333;
        -moz-user-select: none;
        border: 1px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857;
        margin-bottom: 0;
        padding: 6px 12px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-decoration: none !important;
    }
</style>
<link href="~/Scripts/jquerySeat/jquery.seat-charts.css" rel="stylesheet">
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquerySeat/jquery.seat-charts.js"></script>
<style>
    .frontt {
        width: 300px;
        margin: 5px 32px 45px 32px;
        background-color: #f0f0f0;
        color: #666;
        text-align: center;
        padding: 3px;
        border-radius: 5px;
    }

    div.seatCharts-cell {
        color: #182C4E;
        height: 25px;
        width: 25px;
        line-height: 25px;
        margin: 3px;
        float: left;
        text-align: center;
        outline: none;
        font-size: 13px;
    }

    div.seatCharts-seat {
        color: #fff;
        cursor: pointer;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    div.seatCharts-row {
        height: 35px;
    }

    div.seatCharts-seat.available {
        background-color: green;
    }

    div.seatCharts-seat.focused {
        background-color: lightgreen;
        border: none;
    }

    div.seatCharts-seat.selected {
        background-color: blue;
    }

    div.seatCharts-seat.unavailable {
        background-color: red;
        cursor: not-allowed;
    }

    div.seatCharts-container {
        border-right: 1px dotted #adadad;
        width: 400px;
        padding: 20px;
        float: left;
    }

    div.seatCharts-legend {
        padding-left: 0px;
        position: absolute;
    }

    ul.seatCharts-legendList {
        padding-left: 0px;
    }

    .seatCharts-legendItem {
        float: left;
        width: 90px;
        margin-top: 10px;
        line-height: 2;
    }

    span.seatCharts-legendDescription {
        margin-left: 5px;
        line-height: 30px;
    }

    .checkout-button {
        display: block;
        width: 80px;
        height: 24px;
        line-height: 20px;
        margin: 10px auto;
        border: 1px solid #999;
        font-size: 14px;
        cursor: pointer;
    }

    #selected-seats {
        max-height: 150px;
        overflow-y: auto;
        overflow-x: none;
        width: 200px;
    }

</style>

<!--MODAL1 line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="lineModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Reservation</h3>
            </div>
            <div class="modal-body">

                <!-- content goes here -->
                <form>
                    <div class="form-group">
                        <div class="form-group">
                            <label for="inputMovie">Movie</label>
                            <input type="text" class="form-control" id="inputMovie" value="" disabled="disabled">
                        </div>

                        <div class="form-group">
                            <label for="sel1">Cinema: </label>
                            <select class="form-control" id="sel1" onchange="getData()">
                                <option></option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="sel3">Date: </label>
                            <select class="form-control" id="sel3" onchange="getLanguage()">
                                <option></option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="inputLanguage">Language: </label>
                            <input type="text" class="form-control" id="inputLanguage" value="" disabled="disabled">
                        </div>

                        <div class="form-group">
                            <label id="labelAvailableTicket" for="inputAvailableTicket">Available tickets: </label>
                            <input class="form-control" id="inputAvailableTicket" type="number" disabled="disabled" value="0" />
                        </div>

                        <div class="form-group">
                            <label id="labelTicket" for="ticketNr">Tickets: </label>
                            <input class="form-control" id="ticketNr" type="number" min="0" value="0" />
                        </div>

                        <div class="form-group">
                            <label id="labelDiscountedTicket" for="discountedticketNr">Discounted tickets: </label>
                            <input class="form-control" id="discountedticketNr" type="number" min="0" value="0" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <!--<button id="saveImage" class="btn btn-group-justified btn-info"> Save </button>-->
                <button id="showSeats" class="btn btn-group-justified btn-info">Next</button>
                <br />
                <button class="btn btn-group-justified btn-default" data-dismiss="modal"> Close </button>
            </div>
        </div>
    </div>
</div>

<!--MODAL3 line modal -->
<div class="modal fade" id="squarespaceModal2" tabindex="-1" role="dialog" aria-labelledby="lineModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Reservation</h3>
            </div>
            <div class="modal-body">

                <!-- content goes here -->
                <form>
                    <div class="demo">
                        <div id="seat-map">
                            <div class="frontt">SCREEN</div>
                        </div>
                        <div id="selectedSeats">
                            <ul id="selected-seats" hidden="hidden"></ul>
                        </div>
                        <!--<div class="booking-details">
                            <div id="legend"></div>
                        </div>-->
                    </div>
                    
                </form>
            </div>
            <div class="modal-footer">
                <div id="legend"></div>
                <br />
                <!--<button id="saveImage" class="btn btn-group-justified btn-info"> Save </button>-->
                <button class="btn btn-group-justified btn-info">Next</button>
                <br />
                <button class="btn btn-group-justified btn-prev"> Prev </button>
            </div>
        </div>
    </div>
</div>


<!--MODAL2 line modal -->
<div class="modal fade" id="squarespaceModal1" tabindex="-1" role="dialog" aria-labelledby="lineModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Details</h3>
            </div>
            <div class="modal-body">

                <!-- content goes here -->
                <form>
                    <div class="form-group">
                        <div class="form-group">
                            <label for="inputName">First name</label>
                            <input type="text" class="form-control" id="inputName" value="" name="firstname">
                        </div>

                        <div class="form-group">
                            <label for="inputLastName">Last name</label>
                            <input type="text" class="form-control" id="inputLastName" value="" name="lastname">
                        </div>

                        <div class="form-group">
                            <label for="inputEmail">Email</label>
                            <input type="email" class="form-control" id="inputEmail" value="" name="email">
                        </div>

                        <div class="form-group">
                            <label for="inputTelephone">Telephone</label>
                            <input type="tel" class="form-control" id="inputTelephone" value="" name="telephone">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveReservation" type="submit" class="btn btn-group-justified btn-success"> Save </button>
                <br />
                <button class="btn btn-group-justified btn-prev"> Prev </button>
                <br />
                <button id="buttonCloseModal" class="btn btn-group-justified btn-default" data-dismiss="modal"> Close </button>
            </div>
        </div>
    </div>
</div>

<script>
    function getData() {
        $('#sel3').empty();
        $('#sel4').empty();
        $('#ticketNr').val(0);
        $('#discountedticketNr').val(0);
        $('#labelTicket').text("Tickets: ");
        $('#labelDiscountedTicket').text("Discounted tickets: ");
        
        var cinemaId = document.getElementById("sel1").value;
        var data = { "cinemaId": cinemaId, "movieId": $(".movieId").prop("value") };
        $.ajax({
            type: "POST",
            url: "/Home/GetData",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (Data) {
                // Parse the returned json data
                // Use jQuery's each to iterate over the opts value
                $('#sel3').append('<option value=""></option>');
                $.each(Data, function (i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#sel3').append('<option value="' + d.ScreeningId + '">' + formatDate(new Date(parseInt(d.StartDate.substr(6)))) + '</option>');
                });
            }
        });
    }

    function formatDate(date) {
        var year = date.getFullYear(),
            month = date.getMonth() + 1, // months are zero indexed
            day = date.getDate(),
            hour = date.getHours(),
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourFormatted = hour % 12 || 12, // hour returned in 24 hour format
            minuteFormatted = minute < 10 ? "0" + minute : minute,
            morning = hour < 12 ? "am" : "pm";

        return day + "/" + month + "/" + year + " " + hourFormatted + ":" +
                minuteFormatted + morning;
    }

    function getLanguage() {
        $('#sel4').empty();
        $('#labelTicket').text("Tickets: ");
        $('#labelDiscountedTicket').text("Discounted tickets: ");
        var screeningId = document.getElementById("sel3").value;
        var data = { "screeningId": screeningId };
        $.ajax({
            type: "POST",
            url: "/Home/GetLanguage",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (Data) {
                // Parse the returned json data
                // Use jQuery's each to iterate over the opts value
                $.each(Data, function (i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#inputLanguage').val(d.LanguageName);
                    $('#inputAvailableTicket').val(d.AvailableTicket);
                    $('#labelTicket').text("Tickets (Price: " + d.Ticket + "): ");
                    $('#labelDiscountedTicket').text("Discounted tickets (Price: " + d.DiscountedPrice + "): ");
                });
            }
        });
    }
</script>



<div class="panel panel-default">
    <div class="panel-heading">
        <div class="service-title">
            <h2>Movies</h2>
        </div>
    </div>
    <div class="panel-body">
        <div id="movies">

        </div>
    </div>
</div>
<script src="~/ReactFiles/Movies.jsx"></script>

<script src="~/Scripts/bootstrapmodal.min.js"></script>
<script>
    $("div[id^='squarespaceModal']").each(function () {

        var currentModal = $(this);

        //click next
        currentModal.find('.btn-info').click(function () {

            if (currentModal.attr("id") == "squarespaceModal2") {
                var lis = document.getElementById("selectedSeats").getElementsByTagName("li");
                var ticketNr = document.getElementById("ticketNr").value;
                var discountedTicketNr = document.getElementById("discountedticketNr").value;
                if (lis.length < (parseInt(ticketNr) + parseInt(discountedTicketNr)))
                    alert("Number of selected seats is not equal with selected tickets!")
                else {
                    currentModal.modal('hide');
                    currentModal.closest("div[id^='squarespaceModal']").nextAll("div[id^='squarespaceModal']").first().modal('show');
                }
            }
            else {
                var cinemaId = document.getElementById("sel1").value;
                var screeningId = document.getElementById("sel3").value;
                var ticket = document.getElementById("ticketNr").value;
                var discountedTicket = document.getElementById("discountedticketNr").value;
                if (cinemaId && screeningId) {
                    if (ticket != 0 || discountedTicket != 0) {
                        currentModal.modal('hide');
                        currentModal.closest("div[id^='squarespaceModal']").nextAll("div[id^='squarespaceModal']").first().modal('show');
                    }
                    else {
                        alert("Please select at least one ticket!")
                    }
                }
                else {
                    alert("Please select a cinema and a date!")
                }
            }
        });

        //click prev
        currentModal.find('.btn-prev').click(function () {
            currentModal.modal('hide');
            currentModal.closest("div[id^='squarespaceModal']").prevAll("div[id^='squarespaceModal']").first().modal('show');
        });

    });

    $('#squarespaceModal').on('shown.bs.modal', function (e) {
        $('body').removeClass('modal-open');
        $('body').addClass('modal-open');
    });

    $('#squarespaceModal1').on('shown.bs.modal', function (e) {
        $('body').removeClass('modal-open');
        $('body').addClass('modal-open');
    });

    $('#squarespaceModal2').on('shown.bs.modal', function (e) {
        $('body').removeClass('modal-open');
        $('body').addClass('modal-open');
    });

    $('#squarespaceModal').on('hidden.bs.modal', function (e) {
        $('body').removeClass('modal-open');
    });

    $('#squarespaceModal1').on('hidden.bs.modal', function (e) {
        $('body').removeClass('modal-open');
    });

    $('#squarespaceModal2').on('hidden.bs.modal', function (e) {
        $('body').removeClass('modal-open');
    });

    $('#saveReservation').on("click", function (e) {
        var screeningId = document.getElementById("sel3").value;
        var ticketNr = document.getElementById("ticketNr").value;
        var discountedTicketNr = document.getElementById("discountedticketNr").value;
        var firstName = document.getElementById("inputName").value;
        var lastName = document.getElementById("inputLastName").value;
        var email = document.getElementById("inputEmail").value;
        var telephone = document.getElementById("inputTelephone").value;

        var regexEmail = /^(([^<>()\[\]\\.,;:\s@@"]+(\.[^<>()\[\]\\.,;:\s@@"]+)*)|(".+"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var regexTel = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
        var regexName = /^[a-z ,.'-]+$/i;

        var lis = document.getElementById("selectedSeats").getElementsByTagName("li");
        var selectedSeats = "";
        for (var i = 0; i < lis.length; i++)
        {
            selectedSeats = selectedSeats + lis[i].innerText + ",";
        }
        //alert(lis[0].innerText);
        if(regexName.test(firstName))
        {
            if(regexName.test(lastName))
            {
                if(regexEmail.test(email))
                {
                    if(regexTel.test(telephone))
                    {
                        var data = { "screeningId": screeningId, "ticketNr": ticketNr, "discountedTicketNr": discountedTicketNr, "name": firstName + " " + lastName, "email": email, "telephone": telephone, "reservatedSeats": selectedSeats };
                        $.ajax({
                            type: "POST",
                            url: "/Home/CreateReservation",
                            data: JSON.stringify(data),
                            contentType: "application/json; charset=utf-8",
                            success: function (Data) {
                                if (Data)
                                {
                                    alert("Reservation has been placed.");
                                    location.reload();
                                }
                                else
                                {
                                    alert("There are not enought available seats!");
                                }
                            }
                        });
                    }
                    else
                    {
                        alert("Please enter a valid telephone number!");
                    }
                }
                else
                {
                    alert("Please enter a valid email address!");
                }
            }
            else
            {
                alert("Please enter a valid last name!");
            }
        }
        else
        {
            alert("Please enter a valid first name!");
        }
    });
</script>
<script>
    var price = 10; //price
    //$('#squarespaceModal2').on('shown.bs.modal', function () {
    $('#showSeats').click(function () {
        
        var screeningId = document.getElementById("sel3").value;
        var roomSeat = "";
        
        var data = { "screeningId": screeningId };
        $.ajax({
            type: "POST",
            url: "/Home/GetRoomSeats",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (Data) {
                roomSeat = Data;
                var roomMap = roomSeat.split(",");
                var $cart = $('#selected-seats'), //Sitting Area
                $counter = $('#counter'), //Votes
                $total = $('#total'); //Total money

                var sc = jQuery('#seat-map').seatCharts({
                    map: roomMap,
                    naming: {
                        top: false,
                        getLabel: function (character, row, column) {
                            return column;
                        }
                    },
                    legend: { //Definition legend
                        node: $('#legend'),
                        items: [
                            ['a', 'available', 'Option'],
                            ['a', 'unavailable', 'Sold'],
                            ['b', 'selected', 'Selected']
                        ]
                    },
                    click: function () { //Click event
                        if (this.status() == 'available') { //optional seat
                            var ticketNr = parseInt(document.getElementById("ticketNr").value);
                            var discountedTicketNr = parseInt(document.getElementById("discountedticketNr").value);
                            if ((discountedTicketNr + ticketNr) > (sc.find('selected').length)) {
                                $('<li>' + (this.settings.row + 1) + '_' + this.settings.label + '</li>')
                                    .attr('id', 'cart-item-' + this.settings.id)
                                    .data('seatId', this.settings.id)
                                    .appendTo($cart);

                                $counter.text(sc.find('selected').length + 1);
                                $total.text(recalculateTotal(sc) + price);
                                return 'selected';
                            }
                            return this.style();
                        } else if (this.status() == 'selected') { //Checked
                            //Update Number
                            $counter.text(sc.find('selected').length - 1);
                            //update totalnum
                            $total.text(recalculateTotal(sc) - price);

                            //Delete reservation
                            $('#cart-item-' + this.settings.id).remove();
                            //optional
                            return 'available';
                        } else if (this.status() == 'unavailable') { //sold
                            return 'unavailable';
                        } else {
                            return this.style();
                        }
                    }
                });
                sc.find('selected').status('available');
                $cart.empty();
                //sold seat
                var data1 = { "screeningId": screeningId };
                $.ajax({
                    type: "POST",
                    url: "/Home/GetReservatedSeats",
                    data: JSON.stringify(data1),
                    contentType: "application/json; charset=utf-8",
                    success: function (Data) {
                        var uaSeats = Data.split(",");
                        sc.get(uaSeats).status('unavailable');
                    }
                });
                //sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
            }
        });
        

    });
    //sum total money
    function recalculateTotal(sc) {
        var total = 0;
        sc.find('selected').each(function () {
            total += price;
        });

        return total;
    }

    function refreshMap(sc) {
        sc.find('selected').status('available');
    }
</script>